<template>
	<view>
		<view class="back" @click="back">
			<u-icon name="arrow-left" color="#FFFFFF" size="42"></u-icon>
		</view>
		<video
			:src="videoUrl"
			preload
			:autoplay="true"
			:show-play-btn="false"
			:show-center-play-btn="false"
			:controls="false"
			:style="{ height: height, width: width }"
			:loop="false"
			id="video"
			:objectFit="fit"
			:enable-progress-gesture="false"
			@click="clickVideo"
			ref="video_url"
			play-btn-position="center"
			class="video"
			:poster="cover_url"
			@timeupdate="timeupdate">
		</video>
		<cover-image class="play" @click="clickVideo" v-if="show_play" src="/static/images/play_1.png"></cover-image>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseUrl: this.config.baseUrl,
				id:0,
				videoUrl:'',
				height: '667px',
				width: '',
				sysheight:'',
				video_id:0,
				duration:10,
				cover_url:'',
				is_dianzan:false,
				dianzan:0,
				pinglun:0,
				zhuanfa:0,
				showProduct:false,
				show_play:true,
				barWidth:0,
				animationData: {},
				background:{ backgroundColor: 'rgba(255,255,255,0)' },
				customStyle:{ backgroundColor: 'rgba(0,0,0,1)' },
				productList:[],
				play:true,
				videoCtx:null,
				grass:{},
				showTips:false,
				token:'',
				fit:'contain',
				live_id:''
			}
		},
		onLoad(options) {
			this.live_id = options.liveId
			this.getMaterialInfo()
			this.videoCtx = uni.createVideoContext(`video`, this);
			let res = uni.getSystemInfoSync();
			this.height = `${res.windowHeight}px`;
			this.width = `${res.windowWidth}px`;
			this.sysheight = res.windowHeight;
			console.log(this.width)
			console.log(this.height)
			// this.videoCtx.play();
			this.show_play = false;
		},
		// #ifdef MP
		//发送给朋友
		onShareAppMessage(res) {
			// 此处的distSource为分享者的部分信息，需要传递给其他人
			let that = this;
			let share_token = uni.getStorageSync("share_token");
			return {
				title: that.grass.goods.goods_name,
				path: "/pages/material/video/detail?id=" + that.id+'&share_token='+share_token,
				imageUrl: that.baseUrl+that.grass.cover,
			};
		},
		//分享到朋友圈
		onShareTimeline() {
			let share_token = uni.getStorageSync("share_token");
			return {
				title: that.grass.goods.goods_name,
				query: {
					share_token: share_token || ''
				},
				imageUrl: that.baseUrl+that.grass.cover,
			};
		},
		// #endif
		methods: {
			getMaterialInfo(){
				let that = this
				this.$u.get('live/api.index/room',{roomId:this.live_id,'hf':1}).then(res => {
					this.grass = res.data
					this.videoUrl = res.data.video
					this.cover_url = this.baseUrl + res.data.cover
					// uni.setNavigationBarTitle({
					// 	title:this.grass.goods.goods_name
					// })
					this.$nextTick(()=>{
						this.videoCtx.play();
					})
					// #ifdef H5
					this.getShare()
					// #endif
				}).catch(e => {
					if(e.data.action == 'pay'){
						let pages = getCurrentPages();
						let page = pages[pages.length - 1];
						let return_url = '/'+page.route+'?'+this.app.objectToQueryString(page.options)
						uni.showModal({
							title:'付费回放',
							showCancel:false,
							content:e.msg,
							success(e) {
								let authcode = uni.getStorageSync("authcode");
								if (!that.authcode) {
									that.toLogin()
								}else{
									that.$u.post('live/api.index/createOrder',{
										live_id:roomId,
										return_url:return_url,
										is_hf:1
									}).then(res => {
										that.navTo('/pages/live/order/pay?order_id='+res.data.order_id)
									});
								}
							}
						})
					}
				})
			},
			back(){
				uni.navigateBack()
			},
			timeupdate(event) {
				let t_w = parseInt(this.width);
				this.duration = event.detail.duration;
				this.time = event.detail.currentTime;
				let width = (this.time / this.duration) * t_w;
				let w = 0;
				
				if(width > this.barWidth){
					w = (width - this.barWidth) /20;
					//#ifndef APP-PLUS-NVUE
					w = (width - this.barWidth) /5;
					//#endif
				}
				if(this.barWidth >= t_w || width >= t_w || (this.barWidth >= 300 && width <= 150)){
					this.barWidth = 0;
					clearInterval(this.times);
					this.play = false
					this.videoCtx.pause();
					this.show_play = true;
					console.log('播放完毕');
				}else{
					clearInterval(this.times);
					this.times = setInterval(()=>{
						this.barWidth += w;
					},50)
				}
			},
			clickVideo() {
				if (!this.play) {
					this.play = true
					this.videoCtx.play();
					this.show_play = false;
				} else {
					this.play = false
					this.videoCtx.pause();
					this.show_play = true;
				}
			},
			like(){
				likeGrass(this.id).then(res => {
					this.grass.is_like = !this.grass.is_like
					if(this.grass.is_like){
						this.grass.likes++
					}else{
						this.grass.likes--
					}
				});
			},
			videoPlay() {
				if (this.play) {
					console.log('播放视频',`video_${this.video_id}`);
					this.videoCtx = uni.createVideoContext(`video_${this.video_id}`, this);
					this.videoCtx.play();
					this.show_play = false;
				} else {
					console.log('暂停视频',`video_${this.video_id}`);
					this.videoCtx = uni.createVideoContext(`video_${this.video_id}`, this);
					this.videoCtx.pause();
					this.show_play = true;
				}
			},
			goDetail(id){
				uni.navigateTo({
					url:'/pages/shop/goods/info?goods_id='+id
				})
			},
			collect(){
				this.$u.post('material/api.index/collect',{mid:this.grass.id}).then(res => {
					this.grass.is_collect = this.grass.is_collect ? 0 : 1
					uni.showToast({
					    title: res.msg,
					    icon: 'none'
					});
				})
			},
			tapShare(){
				// #ifdef H5
				this.showTips = true
				// #endif
			},
			getShare() {
				let _this = this;
			 
				// js-sdk文档中规定，url的格式要求：
				// 确认url是页面完整的url(请在当前页面alert(location.href.split('#')[0])确认)，包括'http(s): '部分，以及'？'后面的GET参数部分,但不包括'#'hash后面的部分
				var url = location.href.split('#')[0];
				this.$u.post('/publics/api.index/getWxShare', {
					url: url,
				}).then(res => {
					uni.hideLoading();
					var shareConfig = res.data;
					_this.token = res.data.token
					_this.$wxjs.config({
						debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
						appId: res.data.wxShare.appId, // 公众号的唯一标识  
						timestamp: res.data.wxShare.timestamp, // 生成签名的时间戳  
						nonceStr: res.data.wxShare.nonceStr, // ，生成签名的随机串  
						signature: res.data.wxShare.signature, // 签名  
						// surl: res.data.surl, //自己添加的，debug为true的时候可以网页打印出对应的URL是否正确
						jsApiList: ['updateAppMessageShareData','updateTimelineShareData']})
						_this.$wxjs.ready(() => {
							let links = window.location.href;
							let shareLink = ''
							if(_this.token){
								if (links.indexOf('?') > 0){
									shareLink = links + '&share_token=' + res.data.token; 
								}else{
									shareLink = links + '?share_token=' + res.data.token; 
								}
							}else{
								shareLink = links;
							}
							// if (links.indexOf('share_token') < 0){
							// 	if (links.indexOf('?') > 0){
							// 		shareLink = links + '&share_token=' + res.data.token; 
							// 	}else{
							// 		shareLink = links + '?share_token=' + res.data.token; 
							// 	}
							// }else{
							// 	shareLink = links;
							// }

							_this.$wxjs.updateAppMessageShareData({
								title: _this.grass.goods.goods_name?_this.grass.goods.goods_name:'', // 分享标题 
								desc: _this.grass.content?_this.grass.content:'', // 分享描述  
								link: shareLink, // 当前页面链接  
								imgUrl: _this.grass.share_img?_this.baseUrl + _this.grass.share_img:_this.baseUrl + _this.grass.cover, // 分享图标   
								success(res) {
									// uni.showToast({
									// 	title:'成功'
									// })
								},
								cancel(res) {}
							})
							// 自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容（1.4.0）
							_this.$wxjs.updateTimelineShareData({
								title: _this.grass.goods.goods_name?_this.grass.goods.goods_name:'', // 分享标题 
								desc: _this.grass.content?_this.grass.content:'', // 分享描述  
								link: shareLink, // 当前页面链接  
								imgUrl: _this.grass.share_img?_this.baseUrl + _this.grass.share_img:_this.baseUrl + _this.grass.cover, // 分享图标   
								success(res) {},
								cancel(res) {}
							})
						})
					}).catch(err => {
						console.log(err);
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		overflow: hidden;
	}
	.product{
		position: fixed;
		bottom: -1px;
		width: 100%;
		display: flex;
		// margin: 40rpx 20rpx;
		height: 60px;
		line-height: 60px;
		border-bottom: 1px solid #f1f1f1;
		padding: 0 20rpx;
		background-color: #000000;
		.left{
			width: 260rpx;
			color: #FFFFFF;
		}
		.center{
			width: 500rpx;
			text-align: right;
			padding-top: 15rpx;
			.item{
				display: inline-block;
				margin-left: 10rpx;
				image{
					width: 70rpx;
					height: 70rpx;
					border-radius: 10rpx;
				}
			}
		}
		.right{
			width: 50rpx;
			text-align: right;
			.icon{
				
			}
		}
	}
	.product-box{
		.title{
			text-align: center;
			font-size: 36rpx;
			font-weight: bold;
			position: fixed;
			top: 0;
			width: 100%;
			height: 90rpx;
			line-height: 90rpx;
			background-color: #FFFFFF;
			z-index: 1;
			margin: 0;
		}
		.list{
			margin-top: 90rpx;
			padding: 0 20rpx;
			.item{
				display: flex;
				border-bottom: 1px solid #F1F1F1;
				padding: 15px 0;
				.image{
					width: 180rpx;
					image{
						width: 180rpx;
						height: 180rpx;
						border-radius: 10rpx;
					}
				}
				.info{
					width: 500rpx;
					margin-left: 20rpx;
					position: relative;
					.name{
						height: 120rpx;
						font-size: 32rpx;
						font-weight: bold;
						margin-top: 0rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 3;
						-webkit-box-orient: vertical;
					}
					.price{
						font-size: 30rpx;
						margin-top: 18rpx;
						text{
							color: #e93323;
							font-size: 38rpx;
						}
					}
					.detail{
						background-color: #e93323;
						position: absolute;
						bottom: 0rpx;
						right: 0rpx;
						padding: 12rpx 30rpx;
						border-radius: 10rpx;
						color: #FFFFFF;
					}
				}
			}
		}
	}
	.back{
		position: fixed;
		top: 105rpx;
		/* #ifdef H5 */
		top: 40rpx;
		/* #endif */
		left: 25rpx;
		z-index: 99;
	}
	.video {
		width: 100%;
		height: 100%;
		position: relative;
	}
	.play{
		position: absolute;
		width: 20vw;
		height: 20vw;
		left: 40vw;
		top: 40vh;
		opacity: 0.5;
	}
	.progressBar {
		border-radius: 2upx;
		height: 4upx;
		background-color: #FF4500;
		z-index: 999999;
		position: absolute;
		bottom: 68rpx;
		//#ifndef APP-PLUS-NVUE
		bottom: 12rpx;
		//#endif
	}

	.cover-view-left {
		position: absolute;
		margin-left: 20upx;
		width: 580upx;
		bottom: 100upx;
		z-index: 9999;
		font-size: 14px;
		color: #ffffff;
		//#ifndef APP-PLUS-NVUE
		bottom: 80rpx;
		//#endif
	}
	.left-text {
		font-size: 14px;
		color: #ffffff;
	}

	.cover-view-right {
		position: absolute;
		bottom: 40px;
		right: 30upx;
		z-index: 9999;
		text-align: center;
		//#ifndef APP-PLUS-NVUE
		bottom: 380upx;
		//#endif
	}
	.avater {
		border-radius: 50%;
		border-width: 2px;
		border-style: solid;
		border-color: #ffffff;
		width: 75rpx;
		height: 75rpx;
		margin-bottom: 50upx;
		position: relative;
	}
	.share{
		width: 75rpx;
		/* #ifdef H5 */
		height: 75rpx;
		/* #endif */		
		margin-bottom: 10upx;
		position: relative;
		&::after{
			border: none;
		}
	}
	.share-text{
		color: #ffffff;
		font-size: 13px;
		text-align: center;
	}
	.collect{
		width: 75rpx;
		height: 75rpx;
		margin-bottom: 10upx;
		position: relative;
	}
	.collect-text{
		color: #ffffff;
		font-size: 13px;
		text-align: center;
		margin-bottom: 50upx;
	}
	.goods-box{
		background-color: rgba(0, 0, 0, 0.5);
		padding: 14rpx;
		width: 500rpx;
		border-radius: 10rpx;
		margin-top: 20rpx;
		.goods{
			display: flex;
			.goods-img{
				width: 120rpx;
				image{
					width: 100rpx;
					height: 100rpx;
					border-radius: 10rpx;
				}
				.simg{
					width: 100rpx;
					height: 100rpx;
					border-radius: 10rpx;
				}
			}
			.goods-info{
				width: 380rpx;
				position: relative;
				.title{
					
				}
				.price{
					color: #FFFFFF;
					margin-top: 30rpx;
				}
				.buy{
					position: absolute;
					right: 20rpx;
					bottom: 5rpx;
					background-color: #FF4500;
					border-radius: 50rpx;
					font-size: 20rpx;
					padding: 8rpx 25rpx;
				}
			}
		}
	}
	
	
	.img {
		height: 75upx;
		width: 75upx;
		margin-bottom: 50upx;
		position: relative;
	}

	.img-left {
		width: 70upx;
		height: 50upx;
		// padding-left: 4px;
		position: relative;
	}
	.right-follow {
		position: absolute;
		z-index: 100;
		top: 75upx;
		left: 28upx;
		color: #ffffff;
		font-size: 16px;
		width: 34upx;
		height: 34upx;
		background-color: #f12f5b;
		text-align: center;
		line-height: 34upx;
		border-radius: 17upx;
	}

	.right-text {
		color: #ffffff;
		font-size: 13px;
		text-align: center;
		margin-bottom: 20upx;
		margin-top: -10upx;
		display: block;
	}

	.view-left-text-content {
		flex: 1;
	}
	.view-left-text {
		color: #ffffff;
		font-size: 18px;
		margin-bottom: 20upx;
		font-weight: bold;
	}
	.text-content-text {
		color: #ffffff;
		font-size: 14px;
		line-height: 40upx;
		// height: 100upx;
		overflow: auto;
		white-space: normal;
	}
	.view-left-text2 {
		color: #e93323;
		font-size: 18px;
		margin-bottom: 10upx;
		text{
			margin-right: 10px;
		}
	}
	.tips{
		// background-color: #999999;
		position: absolute;
		top:0;
		width:100%;
		z-index: 99999;
		image{
			width: 100%;
		}
	}
</style>
